<template>
  <div id="app">
    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="logo">
              <h2><a href="index.html">Y.J blog</a></h2>
            </div>
          </div>
          <div class="col-md-8">
            <div id="menu" class="menu">
              <ul>
                <li><a href="javascript:void(0);" class="active" onclick="toRoute('home')">Home</a></li>
                <li><a href="javascript:void(0);" onclick="toRoute('about')">About</a></li>
                <li><a href="javascript:void(0);" onclick="toRoute('tags')">Tags</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>
    <router-view></router-view>
    <footer>
			<div class="main-footer">
        <a href="http://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">京ICP备XXXXX号</a>
				<p>记录每一滴汗水</p>
				<div class="icons">
					<ul>
						<li><a target="_BLANK" href="http://facebook.com/"><i class="fa fa-facebook"></i> </a></li>
						<li><a target="_BLANK" href="http://instagram.com/"><i class="fa fa-instagram"></i> </a></li>
						<li><a target="_BLANK" href="http://twitter.com/"><i class="fa fa-twitter"></i></a></li>
						<li><a target="_BLANK" href="http://behance.net/"><i class="fa fa-behance"></i></a></li>
					</ul>
				</div>
			</div>
		</footer>
  </div>
</template>

<script>
// test
export default {
  name: "App",
  created() {
    window.toRoute = this.toRoute
  },
  methods: {
    toRoute(path) {
      this.$router.push(path)
      // 小屏模式下, 点击后需收起菜单栏
      var navBtnList = document.getElementsByClassName('slicknav_btn slicknav_open')
      var navMenuList = document.getElementsByClassName('slicknav_nav')
      if (navBtnList.length > 0 && navMenuList.length > 0) {
        navBtnList[0].className = 'slicknav_btn slicknav_collapsed'
        navMenuList[0].className = 'slicknav_nav slicknav_hidden'
        navMenuList[0].setAttribute('aria-hidden', true)
        navMenuList[0].style.display = 'none'
      }
    }
  }
};
</script>

<style></style>
